<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>学生成绩</title>
    <link rel="stylesheet" href="../static/css/form.css">
    <style>
        a {
            color: #c75f3e;

        }

        .pure-table {
            width: 1000px;
            margin: 0 auto;
        }

        caption {
            padding: 0 0 5px 0;

            width: 700px;

            font: italic 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

            text-align: right;

        }

        th {
            font: bold 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

            color: #4f6b72;

            border-right: 1px solid #C1DAD7;

            border-bottom: 1px solid #C1DAD7;

            border-top: 1px solid #C1DAD7;

            letter-spacing: 2px;

            text-transform: uppercase;

            text-align: left;

            padding: 6px 6px 6px 12px;

            background: #CAE8EA no-repeat;

        }

        th.nobg {
            border-top: 0;

            border-left: 0;

            border-right: 1px solid #C1DAD7;

            background: none;

        }

        td {
            border-right: 1px solid #C1DAD7;

            border-bottom: 1px solid #C1DAD7;

            background: #fff;

            font-size: 11px;

            padding: 6px 6px 6px 12px;

            color: #4f6b72;

        }

        td.alt {
            background: #F5FAFA;

            color: #797268;

        }

        th.spec {
            border-left: 1px solid #C1DAD7;

            border-top: 0;

            background: #fff no-repeat;

            font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

        }

        th.specalt {
            border-left: 1px solid #C1DAD7;

            border-top: 0;

            background: #f5fafa no-repeat;

            font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

            color: #797268;

        }
    </style>
    <script src="../src//js/lib/jquery.min.js"></script>
</head>

<body>
<h2 style="text-align: center">学生成绩</h2>
<p class="descript-info">You can check your grade here</p>
<table id="table" class="pure-table">
    <tr>
        <th>学号</th>
        <th>学生姓名</th>
        <th>出勤分</th>
        <th>作业分</th>
        <th>测验分</th>
        <th>课堂互动分</th>
        <th>期中得分</th>
        <th>期末得分</th>
        <th>总分</th>
    </tr>
    <tbody id="tbody"></tbody>
</table>
<script>
    window.onload = function () {
        // 在此处调用接口提交表单数据
        $.ajax("../api.php/get_student_grade", {
            type: "GET",
            dataType: "json",
            data: {
                studentId: localStorage.getItem("userID"),
            },
            success: function (res, status_code) {
                if (res["code"] == 200) {
                    const person = res.data
                    var table_node = document.getElementById("table");
                    // 创建 tbody节点
                    var tbody_node = document.createElement("tbody");
                    // 将 tbody 节点插入到表格中
                    table_node.appendChild(tbody_node);
                    for (var key in person) {
                        // 循环插入所有的行到 tbody 中
                        tbody_node.insertRow(key);
                        // person[key].gender = person[key].gender == 1 ? "男" : "女";
                        for (var attribute in person[key]) {
                            //  在tbody中的行中插入一个单元格
                            var td_node = tbody_node.rows[key].insertCell(-1);
                            // 创建一个文本节点
                            var text_node = document.createTextNode(person[key][attribute]);
                            // console.log(attribute.gender);
                            td_node.appendChild(text_node);
                        }
                    }
                }
            },
            error: function () {
                // alert('出错了');
            }
        });
    }



</script>
</body>

</html>